<template>
  <div class="tit">

    <!--    <Tit v-if="show" :total="total"></Tit>-->
    <div class="home_tit">
      <div class="inner" style="border: 1px #5ab8cc solid;margin-top: 10px">
        <div class="tit_left" style="margin-left: 20px">
          欢迎来到{{ total.mch_info.mch_name }}!
          <span>【{{ total.domain_name }}】</span>
        </div>
        <div class="tit_right">
          <div class="tit_wxchat" v-if="total.mch_info.mch_type == 1">
            我的小程序
            <img :src="[total.mch_info.mch_qrcode]" alt="">
          </div>
          <div class="logo_btn" @click="show = !show">
            <span class="logo_btn_box" @click="toVideoPage">视频中心</span>|
            <span class="logo_btn_box">我的浏览</span>|
            <span class="logo_btn_box">我的收藏</span>|
            <div class=" logo_btn_box logo_btn_4">
              <div>客服服务</div>
              <div class="logo_btn_4_content">

                <span>在线咨询</span><br/>
                <span>帮助中心</span>

              </div>
            </div>



          </div>
        </div>
      </div>

    </div>
    <!-- 搜索 -->
    <div class="home_search" style="margin-top: 30px">
      <dv-border-box-2 :color="dataVThem.color" :backgroundColor="dataVThem.bgColor">
        <div class="logoPanel" :class="this.$route.path == '/home' ? 'inner_bg' : ''">
          <div class="home_logo">
            <img src="../assets/logo.jpg" alt="" v-if="total.mch_info.mch_logo == ''">
            <img src="https://www.hbxczxpt.com/website/img/app/logo.png" v-else>
            <span v-show="false">{{ total.mch_info.mch_name }}</span>
          </div>
          <div class="searchPanel" ref="searchPanel" v-if="this.$route.path == '/home'">
            <div class="search">
              <input type="text" v-model="searchdata"/>
              <div class="search_btn" @click="searchfn()">
                搜索
              </div>
            </div>
            <div class="searchTj">
              <span v-for="(item, index) in tj" :key="index" class="tag" @click="doSearch(item)">
                <a href="javascript:void(0)">{{ index }}</a>
              </span>
            </div>
          </div>
          <TopNav class="nav" v-if="this.$route.path != '/home'"></TopNav>
          <div class="user" ref="user" :class="this.$route.path === '/home' ? 'positionRight' : ''">
            <div class="logo" v-if="this.$route.path != '/home'" @click="pageurl('/layout')">
              <img
                :src="!(headers && 'string' === typeof headers.avatarUrl) ? require('@/assets/home_logo.png') : headers.avatarUrl"
                alt=""/>
              <div class="logo_name">{{
                  !(headers) ? "未登录" : (headers.name == null ? headers.nickName : headers.name)
                }}
              </div>
            </div>
            <div class="logo" v-else>
              <img src="../assets/home_logo.png" v-if="headers === null" alt="">
              <div class="loginbtn"  @click="pageurl('/login')"> 登录</div>
            </div>
          </div>
        </div>
      </dv-border-box-2>
    </div>
  </div>
</template>

<script>

import Tit from "./tit.vue"
import TopNav from "./TopNav.vue"

import {
  indexapi, totalapi
} from "../api/http.js"

export default {
  name: 'tit',
  components: {
    Tit,
    TopNav,
  },
  data() {
    return {
      show: true,
      headers: null,
      total: "",
      searchdata: "",
      // dataVThem,
      tj: [],
    }
  },
  computed: {
    logined() {
      return false;
    }
  },
  updated() {
    this.setLoginBtnPosition()
  },
  mounted() {
    this.setLoginBtnPosition()
  },
  async created() {
    this.total = JSON.parse(sessionStorage.getItem('total'))
    this.tj = JSON.parse(sessionStorage.getItem('total')).mch_info.pc_params.search;

    this.$EventBus.$emit('total', JSON.parse(sessionStorage.getItem('total')))

    setTimeout(() => {
      this.showdata()
    }, 5000)
    const res = await indexapi()
    if (res.data.code === 200) {
      let userinfo = res.data.data.user_info
      if (Array.isArray(userinfo)) {
        userinfo = userinfo.find(e => (e))
      }
      if (userinfo)
        this.headers = userinfo
    } else {
      this.headers = null
    }
  },
  methods: {
    toVideoPage() {
      this.$router.push({
        path: "/video"
      })
    },
    setLoginBtnPosition() {
      if ('/home' !== this.$route.path) return
      const {searchPanel, user} = this.$refs
      let getDom = (d) => {
        if (d instanceof Element) return d;
      };
      const searchFinalStyle = window.getComputedStyle(getDom(searchPanel))
      const searchW = Number.parseFloat(searchFinalStyle.width), logW = 74, userW = 50, fullW = 1300
      const rightOffset = (fullW - (logW + searchW)) / 2 - userW
      user.style = `right: ${rightOffset}px`
    },

    pageurl(url) {
      this.$router.push({
        path: url
      })
    },
    doSearch(text) {
      this.searchdata = text
      this.searchfn()
      window.open(text,"_blank")
    },
    searchfn() {
      if (this.searchdata === "智能AI文案") {
        this.$router.push({
          path: "/gpt",
        })
        return
      }

      if (this.searchdata === "AI去水印") {
        this.$router.push({
          path: "/RemoveWatermark",
        })
        return
      }

      if (this.searchdata === "AI广告流") {
        this.$router.push({
          path: "/video",
        })
        return
      }
      if (this.searchdata === "商家介绍") {
        this.$router.push({
          path: "/introduce",
        })
        return
      }
      var addressreg = /^[^ ]/
      if (this.searchdata == "" || !addressreg.test(this.searchdata)) {
        return this.$message("请输入正确的搜索内容")
      }
      this.$router.push({
        path: '/search',
        query: {
          search: this.searchdata
        }
      })

      console.log(this.searchdata, 0);
    },
    showdata() {
      this.show = !this.show
      console.log(0)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('~@/assets/style/var.less');


.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  margin-top: 0;
  display: none;
  width: 30px;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  margin-top: 0;
  display: block;
}

.dropdown, .dropdown-content {
  margin-top: 0;
  border-width: 2px;
  border-style: dotted;
}

.tit {
  padding-top: 1rem;

  > div {
    margin: auto;
    width: @main-width;
  }

  .home_tit {
    @height: 40px;
    height: @height;
    line-height: @height;

    .inner {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .tit_left {
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;

        span {
          color: #ffcf69;
        }
      }

      .tit_right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 14px;

        .logo_btn_box {
          display: inline-block;
          width: 80px;
          color: white;
          font-size: 14px;
          text-align: center;
        }


        .dropdown {
          display: inline-block;
          position: relative;
        }

        .dropdown-content {
          margin-top: 0;
          display: none;
          width: 30px;
          position: absolute;
        }

        .dropdown:hover .dropdown-content {
          margin-top: 0;
          display: block;
        }

        .dropdown, .dropdown-content {
          margin-top: 0;
          border-width: 2px;
          border-style: dotted;
        }


        .logo_btn_4 {
          background-color: transparent;
          position: relative;

          .logo_btn_4_content {
            width: 80px;
            display: none;
            background-color: white;
            z-index: 9999999;
            color: black;
          }

          &:hover {
            .logo_btn_4_content {
              position: absolute;
              left: 0;
              display: inline-block;
            }
          }
        }

        .tit_wxchat {
          color: #FFFFFF;
          width: 200px;
          text-align: center;
          position: relative;
          cursor: pointer;
          font-size: 13px;

          img {
            width: 200px;
            height: 200px;
            display: none;
            background-color: #FFFFFF;
          }

          &:hover {
            img {
              position: absolute;
              left: 0;
              top: @height;
              display: inline-block;
            }
          }
        }
      }
    }
  }

  .home_search {
    @height: 160px;
    height: @height;

    .logoPanel {
      width: 100%;
      padding: 1.5rem;
      height: @height;
      display: flex;
      justify-content: flex-start;
      // align-items: flex-end;
      align-content: flex-end;
      position: relative;

      > * {
        margin-right: 1.5rem;

        &:nth-lasst-child(1) {
          margin-right: 0rem;
        }
      }

      .home_logo {
        display: inline-flex;
        flex-direction: column;
        width: 250px;

        img {
          height: 74px;
          margin-bottom: 15px;
        }

        span {
          font-weight: 700;
          font-size: 14px;
          color: #fff;
          text-align: center;
        }
      }

      .searchPanel {
        flex: 1;
        display: inline-flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        @inputRem: 24px;

        .search {
          @searchH: 60px;
          background: #FFFFFF;
          background-color: rgba(53, 96, 133, 0.3);
          border: 2px solid #0ddaefc7;
          box-sizing: border-box;

          * {
            display: inline-block;
          }

          input {
            background-color: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: @inputRem;
            height: @searchH;
            line-height: @searchH;
            text-indent: 1.5 * @inputRem;
            width: 700px;
          }

          .search_btn {
            width: 118px;
            height: 48px;
            background: @border-color;
            background-color: rgba(229, 229, 229, 0.3);
            border-radius: @searchH;
            font-weight: 700;
            font-size: 16px;
            line-height: 48px;
            text-align: center;
            color: #FFFFFF;
            margin-right: 10px;
            margin-bottom: 10px;
          }
        }

        .searchTj {
          padding-left: 1.5 * @inputRem;
          padding-top: 0.5rem;

          .tag {
            margin: 0 0.5rem;
            color: #fff;
            text-decoration: underline;

            &:nth-child(1) {
              margin-left: 0;
            }

            &:nth-lasst-child(1) {
              margin-right: 0;
            }

            &:hover {
              color: @border-color;
              text-decoration-color: @border-color;
            }
          }
        }
      }

      .user {
        margin-top: -10px;

        .logo {
          flex: 0.5;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          height: 100%;
          width: 50px;

          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-bottom: 10px;
          }

          .logo_name {
            font-size: 14px;
            color: #93dde9
          }
        }

        .loginbtn {
          font-size: 16px;
          @height: 1.5rem;
          // min-height: 1rem;
          width: 4rem;
          height: @height;
          background-color: rgba(42, 173, 213, 0.82);
          border-radius: @height;
          font-weight: 700;
          line-height: @height;
          text-align: center;
          color: #FFFFFF;
          margin-right: 10px;
        }
      }

      .nav {
        margin: auto;
      }

    }
  }
}</style>
